<script setup lang="ts">
import { ref } from 'vue';
import AuthBar from '@/components/authBar/index.vue';

const processList = ref([
  {
    id: '1',
    title: '预约挂号',
    desc: '通过自助机、官网/公众号进行预约挂号，选择科室和医生。',
    tags: ['可提前15天预约', '初诊患者需先建卡']
  },
  {
    id: '2',
    title: '报到候诊',
    desc: '就诊当天，在自助机或分诊台刷卡报到，等待叫号。',
    tags: ['建议提前30分钟到达', '候诊区有叫号显示屏']
  },
  {
    id: '3',
    title: '医生诊疗',
    desc: '听到叫号后，前往相应诊室就诊，向医生详细描述病情。',
    tags: ['携带相关检查资料', '如实告知过敏史']
  },
  {
    id: '4',
    title: '检查缴费',
    desc: '根据医生开具的检查单或处方，在自助机或收费处缴费。',
    tags: ['支持多种支付方式', '支持多种支付方式']
  },
  {
    id: '5',
    title: '取药/治疗',
    desc: '缴费后前往药房取药或到相应科室进行检查、治疗。',
    tags: ['看清取药窗口号', '询问用药方法']
  }
]);
</script>

<template>
  <view class="page flex-col">
    <AuthBar />
    <view class="flex-1 overflow-auto px-75 pb-60 pt-50">
      <view class="page-title mb-40">
        就诊流程指南
      </view>
      <view class="process-group">
        <view v-for="(item, index) in processList" :key="item.id" class="process-item">
          <view class="process-item__left flex-col items-center">
            <view class="process-item__line h-20" :class="{ 'opacity-0': index === 0 }" />
            <view class="process-item__step my-12">
              {{ index + 1 }}
            </view>
            <view v-if="index !== processList.length - 1" class="process-item__line flex-1" />
          </view>
          <view class="process-item__right">
            <view class="process-item__title">
              {{ item.title }}
            </view>
            <view class="process-item__desc mt-28">
              {{ item.desc }}
            </view>
            <view class="process-item__tags mt-20 flex">
              <view v-for="tag in item.tags" :key="tag" class="tag">
                {{ tag }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<route type="page" lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '就诊流程',
    navigationStyle: 'custom'
  }
}
</route>

<style lang="scss" scoped>
.page {
  height: 100%;
  background-color: var(--bg-color);

  .page-title {
    color: var(--text-color);
    font-size: 60px;
    font-weight: bold;
    text-align: center;
  }

  .process-group {
    .process-item {
      @apply flex;
    }

    .process-item__step {
      width: 84px;
      height: 84px;
      border-radius: 50%;
      color: #fff;
      background: var(--primary);
      font-size: 50px;
      font-weight: bold;
      text-align: center;
      line-height: 84px;
    }

    .process-item__line {
      background: #3c7ce2;
      width: 1px;
    }

    .process-item__right {
      flex: 1;
      border: 2px solid #e6effd;
      border-radius: 20px;
      background: #f5f9ff;
      padding: 40px;
      margin-left: 24px;
      margin-bottom: 30px;
    }

    .process-item__title {
      color: #3d3d3d;
      font-size: 36px;
      font-weight: bold;
    }

    .process-item__desc {
      color: #6f6f6f;
      font-size: 28px;
    }

    .process-item__tags {
      .tag {
        background: #e3eeff;
        border-radius: 100px;
        font-size: 26px;
        color: var(--primary);
        padding: 12px 48px;
        margin-right: 24px;
      }
    }
  }
}
</style>
